<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>充值商户后台</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="../static/x-admin/css/font.css">
        <link rel="stylesheet" href="../static/x-admin/css/xadmin.css">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
        <script src="../static/x-admin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../static/x-admin/js/xadmin.js"></script>
        <script type="text/javascript" src="../static/js/jquery-3.5.1.min.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script>
            // 是否开启刷新记忆tab功能
            // var is_remember = false;
        </script>
    </head>
    
    <body>
        <div class="layui-fluid">
            <div class="layui-collapse">
                <div class="layui-card">
                    <div class="layui-card-header"><h4>首页 / 充值订单</h4></div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">订单号：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="orderno" required  lay-verify="required" placeholder="" autocomplete="on" class="layui-input">
                                </div>

                                <label class="layui-form-label">玩家账号：</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="playeraccount" required  lay-verify="required" placeholder="" autocomplete="on" class="layui-input">
                                </div>

                                <label class="layui-form-label">分区：</label>
                                <div class="layui-input-inline">
                                    <select name="area" lay-verify="required">
                                        <option value=""></option>
                                        <option value="0">星沙二区</option>
                                        <option value="1">虎门区</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">充值状态：</label>
                                <div class="layui-input-inline">
                                    <select name="rechargestate" lay-verify="required">
                                        <option value=""></option>
                                        <option value="0">充值成功</option>
                                        <option value="1">等待付款</option>
                                    </select>
                                </div>

                                <label class="layui-form-label">开始时间：</label>
                                <div class="layui-input-inline ">
                                    <input class="layui-input" id="starttime" type="text">
                                </div>

                                <label class="layui-form-label">结束时间：</label>
                                <div class="layui-input-inline datetime">
                                    <input class="layui-input" id="endtime" type="text">
                                </div>
                                <button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">充值状态：</label>
                                <div class="layui-input-inline">
                                    <select name="rechargestate" lay-verify="required">
                                        <option value=""></option>
                                        <option value="0">充值成功</option>
                                        <option value="1">等待付款</option>
                                    </select>
                                </div>

                                <label class="layui-form-label">开始时间：</label>
                                <div class="layui-input-inline ">
                                    <input class="layui-input" id="starttime" type="text">
                                </div>

                                <label class="layui-form-label">结束时间：</label>
                                <div class="layui-input-inline datetime">
                                    <input class="layui-input" id="endtime" type="text">
                                </div>
                                <button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
                            </div>

                        </form>
                        <table id="demo" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>


        <script type="text/html" id="toolbarhead">
            <button class="layui-btn layui-btn-sm" lay-event="flush"><i class="layui-icon layui-icon-refresh-3">刷新</i></button>
        </script>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <div class="layui-btn layui-btn-danger" lay-event="notifyonce"><i class="layui-icon layui-icon-notice">通知</i> </div>
            </div>
        </script>
    </body>

    <script>
        layui.use('laydate', function () {
            let laydate = layui.laydate;

            laydate.render({
                elem: "#starttime",
                type: 'datetime'
            })

            laydate.render({
                elem: "#endtime",
                type: 'datetime'
            })
        })
        //Demo
        layui.use('form', function(){
            let form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });

        // table
        layui.use('table', function () {
            let table = layui.table;

            table.render({
                elem:"#demo",
                height: 400,
                url: "/static/data/order.json",
                page:true,
                limits: [10, 20, 30, 50, 100, 200],
                cols:[[
                    {field: 'id', title: "ID", sort:true, fixed:'left'},
                    {field: "notify", title:"通知状态"},
                    {field: "orderno", title: "订单号"},
                    {field: "area", title: "所属分区"},
                    {field: "rechargeaccount",title: "充值账号"},
                    {field: "playerqq",title: "玩家QQ"},
                    {field: "money",title: "金额", sort: true},
                    {field: "googs",title: "商品"},
                    {field: "paytype", title: "支付方式"},
                    {field: "createtime", title: "创建时间", sort: true},
                    {fixed: 'right', title: "操作", width:120, align:'center', toolbar: '#toolbar'}
                ]
                ],
                toolbar: "#toolbarhead"
            });

            // 监听行工具
            table.on('tool(test)', function (data) {
                let event = data.event;
                if ("notifyonce" === event) {
                    layer.confirm("手动发送通知可能会导致给玩家重复加款，确定重新发送？", {
                        btn: ["重新发送", "取消发送"]
                    }, function () {
                        layer.msg("处理发送通知的代码")
                    },function (index) {
                        layer.close(index);
                    })
                }
            })
        })
    </script>
</html>